import React from 'react'
import style from './index.module.css'
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
  const router=useNavigate();
  const doLogin=()=>{
      router('/home')
  }  
  
  return (
    <div className={style.loginContainer}>
       <div className={style.loginFrom}>
    <Form
    name="basic"
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  > 
    <h2>振涛在线教育系统</h2>
    <Form.Item<FieldType>
      label="用户名"
      name="username"
      rules={[{ required: true, message: '请输入账号' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item<FieldType>
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" block htmlType="submit" onClick={doLogin}>
        登录
      </Button>
    </Form.Item>
  </Form>
       </div>
    </div>
  )
}
